<template>
  <!-- 编辑角色对话框 -->
  <el-dialog title="编辑角色" v-model="editRoleDialogVisible" width="50%" @close="editRoleDialogClosed">
    <!-- 内容主体区域 -->
    <el-form :model="editFormData" :rules="editFormRules" ref="editRoleFormRef" label-width="80px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="editFormData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="editFormData.roleDesc"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span class="dialog-footer">
      <el-button @click="resetRoleForm">重置</el-button>
      <el-button @click="editRoleDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { editRoleApi, getRoleInfoByIdApi } from '@/api/role'
import { message } from '@/utils/functions'
// 控制对话框的显示与隐藏
const editRoleDialogVisible = ref(false)
// 编辑的表单数据
const editFormData = ref({
  roleId: '',
  roleName: '',
  roleDesc: ''
})
// 验证规则
const editFormRules = ref({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '角色名称的长度在2-10个字符之间',
      trigger: 'blur'
    }
  ],
  roleDesc: [
    { required: true, message: '请输入角色描述', trigger: 'blur' },
    {
      min: 2,
      max: 15,
      message: '角色描述的长度在2-15个字符之间',
      trigger: 'blur'
    }
  ]
})

// dom对象
const editRoleFormRef = ref(null)
const emit = defineEmits(['getRoleList'])
// 编辑角色
const editRole = () => {
  // 1.表单验证
  editRoleFormRef.value.validate(async valid => {
    if (!valid) {
      return
    }
    // 2.表单验证通过
    // 3.调用接口，编辑角色
    await editRoleApi(editFormData.value)
    message('success', '编辑角色成功')
    // 4.关闭对话框
    editRoleDialogVisible.value = false
    // 5.触发父组件的自定义事件，刷新角色列表
    emit('getRoleList')
  })
}

// 重置表单
const resetRoleForm = () => {
  editRoleFormRef.value.resetFields()
}
// 对话框的关闭
const editRoleDialogClosed = () => {
  resetRoleForm()
}

// 对外提供控制对话框的打开方法
const open = async id => {
  // 根据id获取当前角色信息,并将获取到的角色信息，赋值给表单
  const data = await getRoleInfoByIdApi(id)
  editFormData.value = data
  editRoleDialogVisible.value = true
}
// 对外提供控制对话框的关闭方法
const close = () => {
  editRoleDialogVisible.value = false
}
// 在vue2和vue3的早期版本中，默认所有的组件对象成员和属性都会被暴露出去，但是现在默认不会暴露出去，需要使用defineExpose
// 把需要对外提供使用的成员暴露出去
defineExpose({
  // editRoleDialogVisible,
  open,
  close
})
</script>

<style lang="scss" scoped>
</style>